<template >
    <div>
        <!-- 商品列表 -->

        <!-- 面包屑 -->
        <div class="mbx">
            <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item>商品管理</el-breadcrumb-item>
                <el-breadcrumb-item>商品列表</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="tab-box">
            <!-- 添加搜索 -->
            <div class="search">
                <el-input placeholder="请输入内容" v-model="page.query" class="input-with-select">
                    <el-button slot="append" icon="el-icon-search" @click="search"></el-button>
                </el-input>
                <!--  -->
                <el-button type="primary"  @click="addshop">添加商品</el-button> 
            </div>
            <!-- table  -->
            <el-table :data="tableData" border style="width: 100%" stripe>
                <el-table-column fixed type="index" label="#">
                </el-table-column>
                <el-table-column prop="goods_name" label="商品名称" width="636">
                </el-table-column>
                <el-table-column prop="goods_price" label="商品价格（元）">
                </el-table-column>
                <el-table-column prop="goods_weight" label="商品重量">
                </el-table-column>
                <el-table-column prop="add_time" label="创建时间">
                    <template slot-scope="scope">
                        {{ scope.row.add_time | Time }}
                    </template> 
                </el-table-column>

                <el-table-column fixed="right" label="操作" width="200">
                    <template slot-scope="scope">
                        <!-- @click="revise(scope.row)" -->
                        <el-button icon="el-icon-edit" type="primary"
                            size="small"></el-button>
                            <!-- @click="del(scope.row)" -->
                        <el-button type="danger" @click="del(scope.row)"  size="small" icon="el-icon-delete"></el-button>
                    </template>
                </el-table-column>
            </el-table>

        </div>

        <!-- //模态框 -->
        <!-- <el-dialog :title="title" :visible.sync="dialogVisible" width="60%">
            表单 
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                <el-form-item label="商品名称" prop="goods_name">
                    <el-input v-model="ruleForm.goods_name"></el-input>
                </el-form-item>
                <el-form-item label="商品价格" prop="goods_price">
                    <el-input v-model="ruleForm.goods_price"></el-input>
                </el-form-item>
                <el-form-item label="商品数量" prop="goods_number">
                    <el-input v-model="ruleForm.goods_number"></el-input>
                </el-form-item>
                <el-form-item label="商品重量" prop="goods_weight">
                    <el-input v-model="ruleForm.goods_weight"></el-input>
                </el-form-item>
                <el-form-item label="商品图片" prop="" v-show="title == '添加商品'">
                    <el-upload class="upload-demo" action="https://jsonplaceholder.typicode.com/posts/">
                        <el-button size="small" type="primary">点击上传</el-button>
                    </el-upload>
                </el-form-item>

                <el-form-item>
                    <p class="p-btn">
                        <el-button @click="resetForm('ruleForm')">取消</el-button>
                        <el-button type="primary" @click="submitForm('ruleForm')"
                            v-show="title == '添加商品'">确定</el-button>
                        <el-button type="primary" @click="reviseshop('ruleForm')"
                            v-show="title == '编辑商品'">确定.</el-button>
                    </p>
                </el-form-item>

            </el-form>


        </el-dialog> -->

        <!-- 分页  -->
        <div class="block">

            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                :current-page="page.pagenum" :page-sizes="[5, 10, 15, 20]" :page-size="page.pagesize"
                layout="total, sizes, prev, pager, next, jumper" :total="total">
            </el-pagination>
        </div>
    </div>









</template>
<script>
import { getshop, getaddshop, getreviseshop ,getdelshop} from "../api/api"
export default {
    data() {
        return {
            // 分页
            page: {
                query: '',
                pagenum: 1,
                pagesize: 5,
            },
            // 一共几条 
            total: 10,
            // 表格 
            tableData: [],
            //开关
            dialogVisible: false,
            //表单
            // ruleForm: {
            //     goods_cat: '1,2,3',
            //     goods_name: "",
            //     goods_price: "",
            //     goods_number: "",
            //     goods_weight: "",
            //     goods_introduce: "",
            //     pics: "",
            //     attrs: "",

            // },
            // rules: {
            //     goods_name: { required: true, message: '请输入商品名称', trigger: 'blur' },
            //     goods_price: { required: true, message: '请输入用价格', trigger: 'blur' },
            //     goods_number: { required: true, message: '请输入用数量', trigger: 'blur' },
            //     goods_weight: { required: true, message: '请输入用重量', trigger: 'blur' },
            // },
            //模态框名字
            title: "",
        }
    },
    methods: {

        // 请求商品数据列表
        shop() {
            getshop(this.page).then(res => {
                console.log(res);
                this.tableData = res.data.goods
                this.total = res.data.total


            })
        },
        //搜索
        search() {
            this.shop()
        },
        //一页几条
        handleSizeChange(val) {
            // console.log(val);
            this.page.pagesize = val
            this.shop()
        },
        //跳转到第几页
        handleCurrentChange(val) {
            // console.log(val);
            this.page.pagenum = val
            this.shop()
        },

        //点击addshop出现模态框
        addshop() {
            // this.dialogVisible = true
            // this.title = "添加商品"
            this.$router.push("add")
        },

        //点击添加用户
        // submitForm(formName) {
        //     this.$refs[formName].validate((valid) => {
        //         if (valid) {
        //             console.log('submit!');
        //             getaddshop(this.ruleForm).then(res => {
        //                 console.log(res);

        //                 this.shop()

        //                 this.dialogVisible = false

        //             })
        //         } else {
        //             console.log('error submit!!');
        //             return false;
        //         }
        //     });
        // },

        //重置
        // resetForm(formName) {
        //     this.$refs[formName].resetFields();
        // },

        //点击revise出现模态框
        // revise(row) {
        //     this.dialogVisible = true
        //     this.title = "编辑商品"
        //     this.ruleForm = row

        // },

        //点击reviseshop上传编辑好的内容
        // reviseshop() {
        //     getreviseshop({ ...this.ruleForm, id: this.ruleForm.goods_id, goods_cat: '1,2,3', }).then(res => {
        //         console.log(res);
        //         this.shop()
        //     })
        // },

        // 点击del删除
        del(row){
          
            getdelshop({id:row.goods_id}).then(res=>{
                // console.log(res);
                this.shop()
            })
        }



    },
    //时间过滤器
    filters: {
        Time(val) {
            let time = new Date(val * 1000).toLocaleString()
            return time
        }
    },
    created() {
        this.shop()
    },
}
</script>
<style lang="scss" scoped>
.tab-box {
    margin-top: 15px;
    background-color: #fff;
    padding: 18px;
    box-sizing: border-box;
}

.search {
    margin-bottom: 15px;
}

.input-with-select {
    width: 350px;
    margin-right: 18px;
}

.p-btn {
    text-align: right;
}
</style>